<template>
  <div>
    <div class="title">
      <h1>
        企业列表
        <el-select
          v-model="areaCode"
          filterable
          style="margin-left: 40px"
          learable
          @change="query"
          placeholder="请选择城市"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </h1>
      <div class="search_box">
        <div class="search">
          <el-input
            class="import"
            placeholder="输入企业关键字"
            clearable
            v-model="search"
            @change="query"
          >
          </el-input>
          <!-- <button>
            <img
              src="../../assets/image/Vectorintelligentobject_2.png"
              alt=""
            />
          </button> -->
        </div>
        <!-- <el-button size="mini" type="primary">导出</el-button> -->
        <el-button size="mini" type="primary" @click="query">查询</el-button>
      </div>
    </div>
    <el-table
      :data="tableData"
      stripe
      style="background-color: transparent; margin: auto"
      height="31vh"
    >
      <el-table-column prop="num" label="序号" width="50px" align="center">
      </el-table-column>
      <el-table-column
        prop="cityCode"
        label="城市"
        width="100px"
        align="center"
      >
        <template slot-scope="scope">
          <div v-if="scope.row.cityCode == '0850'" slot="reference">省外</div>
          <div v-else-if="scope.row.cityCode == '0851'">贵阳</div>
          <div v-else-if="scope.row.cityCode == '0852'">遵义</div>
          <div v-else-if="scope.row.cityCode == '0853'">安顺</div>
          <div v-else-if="scope.row.cityCode == '0854'">
            黔南
          </div>
          <div v-else-if="scope.row.cityCode == '0855'">
            黔东南
          </div>
          <div v-else-if="scope.row.cityCode == '0856'">铜仁</div>
          <div v-else-if="scope.row.cityCode == '0857'">毕节</div>
          <div v-else-if="scope.row.cityCode == '0858'">六盘水</div>
          <div v-else>黔西南</div>
        </template>
      </el-table-column>
      <el-table-column
        prop="businessCode"
        label="企业"
        align="center"
        width="230px"
      >
      </el-table-column>
      <el-table-column prop="userCount" label="用户数" align="center">
      </el-table-column>
      <el-table-column
        prop="attch_ask_success_rate"
        label="附着成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="pdp_ask_success_rate"
        label="PDP成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="tcp_ask_success_rate"
        label="TCP成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="http_ask_success_rate"
        label="HTTP成功率(%)"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="tcp_create_time"
        label="TCP时延(ms)"
        align="center"
      >
      <template slot-scope="scope">
          <div>
            
            {{parseFloat(scope.row.tcp_create_time) +
                    parseFloat(scope.row.tcp_suc_req_time)}}
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currpage"
      :page-sizes="[15, 50, 100, 200, 300]"
      :page-size="pagesize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
import { baseURL } from "../../utils/ipConfig";

export default {
  data() {
    return {
      total: 0,
      currentPage4: 1,
      currpage: 1,
      pagesize: 15,
      areaCode: "",
      tableData: [],
      options: [
        {
          label: "全省",
          value: "",
        },
        {
          label: "贵阳",
          value: "0851",
        },
        {
          label: "遵义",
          value: "0852",
        },
        {
          label: "安顺",
          value: "0853",
        },
        {
          label: "黔南",
          value: "0854",
        },
        {
          label: "黔东南",
          value: "0855",
        },
        {
          label: "铜仁",
          value: "0856",
        },
        {
          label: "毕节",
          value: "0857",
        },
        {
          label: "六盘水",
          value: "0858",
        },
        {
          label: "黔西南",
          value: "0859",
        },
      ],
      search: "",
    };
  },
  watch: {
    touchTest() {
      this.getDataList();
    },
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    getDataList() {
      let _this = this;
      if (_this.areaCode == "") {
        let params = new URLSearchParams();
        params.append("pageNum", _this.currpage);
        params.append("pageSize", _this.pagesize);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 0) {
              _this.total = resData.count;
              _this.tableData = resData.data;
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        params.append("pageNum", _this.currpage);
        params.append("pageSize", _this.pagesize);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 0) {
              _this.total = resData.count;
              _this.tableData = resData.data;
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
    handleSizeChange(val) {
      this.pagesize = val;
      this.currpage = 1;
      this.getDataList();
    },
    handleCurrentChange(val) {
      this.currpage = val;
      this.getDataList();
    },
    //导出
    derive() {
      let _this = this;
      require.ensure([], () => {
        const { export_json_to_excel } = require("../../vendor/Export2Excel");
        const tHeader = [
          "序号",
          "城市",
          "企业",
          "附着成功率(%)",
          "PDP成功率(%)",
          "TCP成功率(%)",
          "HTTP成功率(%)",
          "TCP时延(ms)",
        ];
        const filterVal = [
          "num",
          "cityCode",
          "businessCode",
          "attch_ask_success_rate",
          "pdp_ask_success_rate",
          "tcp_ask_success_rate",
          "http_ask_success_rate",
          "tcp_create_time",
        ];
        const list = _this.tableData;
        const data = _this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "企业信息");
      });
      // this.$export.excel({
      //   title: "企业信息",
      //   columns: [
      //     { label: "序号", prop: "num" },
      //     { label: "城市", prop: "cityCode" },
      //     { label: "企业", prop: "businessCode" },
      //     { label: "附着成功率(%)", prop: "attch_ask_success_rate" },
      //     { label: "PDP成功率(%)", prop: "pdp_ask_success_rate" },
      //     { label: "TCP成功率(%)", prop: "tcp_ask_success_rate" },
      //     { label: "HTTP成功率(%)", prop: "http_ask_success_rate" },
      //     { label: "TCP时延(ms)", prop: "tcp_create_time" },
      //   ],
      //   data: this.tableData,
      // });
    },
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
    // 查询
    query() {
      let _this = this;
      if (_this.search == "") {
        this.$emit("switch", this.areaCode);
        let params = new URLSearchParams();
        params.append("cityCode", _this.areaCode);
        params.append("pageNum", _this.currpage);
        params.append("pageSize", _this.pagesize);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 0) {
              _this.total = resData.count;
              _this.tableData = resData.data;
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      } else {
        this.$emit("switch", this.areaCode);
        let params = new URLSearchParams();
        params.append("queryStr", _this.search);
        params.append("cityCode", _this.areaCode);
        params.append("pageNum", _this.currpage);
        params.append("pageSize", _this.pagesize);
        _this.$ajax
          .post(`${baseURL.ip1}/pc/getAllBusinessNameAnalysisDataList`, params)
          .then(function (res) {
            //请求成功
            let resData = res.data;
            if (resData.code == 0) {
              _this.total = resData.count;
              _this.tableData = resData.data;
            }
          })
          .catch(function (error) {
            //请求失败
            console.log(error);
          });
      }
    },
  },
};
</script>

<style  scoped>
/* 标题 */
.title {
  padding: 0 1vw;
  display: flex;
  flex-flow: row nowrap;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.title h1 {
  height: 4vh;
  line-height: 4vh;
  font-size: 18px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
}
.search_box {
  display: flex;
  flex-flow: row nowrap;
}
.search {
  height: 3vh;
  padding: 5px;
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  background: url("../../assets/image/rectangle6.png") no-repeat;
  background-size: 100% 100%;
  margin-right: 5px;
}
.search input::placeholder {
  color: #005185;
}
.search input {
  width: 14vw;
  height: 4vh;
  padding-left: 3px;
  font-size: 16px;
  font-family: Microsoft YaHei, Microsoft YaHei-Regular;
  font-weight: 400;
}
</style>